<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    body{
      padding: 0;
      margin: 0;
      background-size: cover;
      font-family: sans-serif;
      background: #000000;
    }
    h1{
      margin: 0 0 10px;
      padding: 0;
      color:#fff;
      font-size: 24px;

    }
    .box{
      position:absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      width: 500px;
    }
    input{
      position:relative;
      display: inline-block;
      font-size: 20px;
      box-sizing: border-box;
      transition: 5s;

    }
    input[type="text"]{
      background: #fff;
      width: 340px;
      height: 50px;
      border: none;
      outline: none;
      padding: 0 25px;
      border-radius: 25px 0 0 25px;
    }
    input[type="submit"]{
      position:relative;
      left: -5px;
      border-radius: 0 25px 25px 0 ;
      width: 150px;
      height: 50px;
      border:none;
      outline:none;
      cursor: pointer;
      background: #8b8b0b;
      color:#fff;
    }
    input[type="submit"]:hover{
      background: #85144b;
    }

  </style>
</head>
<body>
<div class="box">
  <form action="制作全屏搜索框鼠标动画.html" class="" method="post">
    <h1>Search</h1>
    <input type="text" name="" placeholder="Type...">
    <input type="submit" name="" placeholder="" value="Search">
  </form>
</div>
</body>
</html>